<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="路由ID" prop="routeId">
        <el-input
            v-model="form.routeId"
            placeholder="请填写路由ID"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="form.name"
            placeholder="请填写名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="uri">
        <el-input
            v-model="form.uri"
            placeholder="请填写地址"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="路由断言" prop="predicates">
        <codemirror
            v-model="form.predicates"
            placeholder="请填写路由断言"
            :autofocus="true"
            :indent-with-tab="true"
            :tab-size="2"
            :extensions="extensions"
            :style="{ width: '100%', height: '200px' }"
        />
      </el-form-item>
      <el-form-item label="路由过滤规则" prop="filters">
        <codemirror
            v-model="form.filters"
            placeholder="请填写路由过滤规则"
            :autofocus="true"
            :indent-with-tab="true"
            :tab-size="2"
            :extensions="extensions"
            :style="{ width: '100%', height: '200px' }"
        />
      </el-form-item>
      <el-form-item label="元数据" prop="metadata">
        <codemirror
            v-model="form.metadata"
            placeholder="请填写元数据"
            :autofocus="true"
            :indent-with-tab="true"
            :tab-size="2"
            :extensions="extensions"
            :style="{ width: '100%', height: '200px' }"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
            size="small"
            v-model="form.remark"
            placeholder="请填写备注"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            show-word-limit
            maxlength="99"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="saveEdit"
        >保存
        </el-button
        >
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  serverDetailApi,
  serverEditApi,
  serverSaveApi,
} from "../../../api/mgt/system/server";
import {createObjectBase, deepCopy} from "@/utils";

import {json} from '@codemirror/lang-json';
import {oneDark} from '@codemirror/theme-one-dark';

const obj = {
  //信息
  id: "",
  routeId: "",
  name: "",
  uri: "",
  predicates: "",
  filters: "",
  metadata: "",
  remark: "",
};

export default {
  data() {
    return {
      extensions: [
        json(),
        oneDark
      ],
      form: deepCopy(obj),
      rules: {
        routeId: [
          {required: true, message: "请填写路由ID", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        name: [
          {required: true, message: "请填写名称", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        uri: [
          {required: true, message: "请填写地址", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        predicates: [
          {required: true, message: "请填写路由断言", trigger: "change"},
          {max: 499, message: "长度不能超过499个字符", trigger: "change"},
        ],
        filters: [
          {required: true, message: "请填写路由过滤规则", trigger: "change"},
          {max: 499, message: "长度不能超过499个字符", trigger: "change"},
        ],
        metadata: [
          {required: true, message: "请填写元数据", trigger: "change"},
          {max: 499, message: "长度不能超过499个字符", trigger: "change"},
        ],
        remark: [
          {required: false, message: "请填写备注", trigger: "change"},
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
      },
    };
  },
  methods: {
    // 编辑操作
    getDetail(id) {
      if (!id) {
        if (this.$refs.form != undefined) {
          this.$refs['form'].resetFields();
        }
      } else {
        serverDetailApi({id}).then((res) => {
          const data = deepCopy(res?.bizData);
          data.predicates = JSON.stringify(data.predicates, undefined, 2);
          data.filters = JSON.stringify(data.filters, undefined, 2);
          data.metadata = JSON.stringify(data.metadata, undefined, 2);
          this.form = data;
        });
      }
    },
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = createObjectBase(this.form, Object.keys(obj));
          data.predicates = JSON.parse(data.predicates);
          data.filters = JSON.parse(this.form.filters);
          data.metadata = JSON.parse(this.form.metadata);
          const {id} = data;
          const fn = id ? serverEditApi : serverSaveApi;
          fn(data).then((res) => {
            this.goBack();
          });
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/server/page",
      });
    },
  },
  created() {
    const {id} = this.$route.query;
    this.getDetail(id);
  },
};
</script>
